<script setup lang="ts">
import { questionTypeOptions  } from "../const"
import AsyncImage from './async-image.vue';
import { $t } from '@vben/locales';

defineOptions({ name: 'ExamDetail' });
defineProps({
  itemData: {} as any
})

const readerTitle = (data:any) => {
  const question = data?.questions[0];
  const index = new Intl.NumberFormat('zh-Hans-CN-u-nu-hanidec').format(
    data?.index + 1,
  );
  const type = questionTypeOptions.find(
    (_) => _.value === question?.type,
  )?.label;
  const titleTxt = {
    radio: $t('paper.radioDescription'),
    checkbox: $t('paper.checkboxDescription'),
    trueFalse: $t('paper.trueFalseDescription'),
    fillBlank: $t('paper.fillBlankDescription'),
    essay: $t('paper.essayDescription'),
    composite: $t('paper.compositeDescription'),
  };
  const totScore = data?.questions?.reduce((acc:number, curr:any) => acc + (+curr?.score || 0), 0);
  return `${index}、${type} (${$t('paper.questionDescription', [data?.questions?.length, totScore])}) ${titleTxt[question?.type as keyof typeof titleTxt] || ''}`;
};
const getOption = (data:any) => {
  try {
    const arr = JSON.parse(data);
    return arr;
  } catch {
    return [];
  }
}
const trueFalseStyle=(type:string)=>{
  if(type!='trueFalse')return {}
  return {
    display: 'inline-block',
    width: '73px'
}
}
</script>
<template>
  <div>
    <!-- 试卷内容 -->
    <div class="content-txt exam-type-title mb-[16px] font-[500] text-[16px]">{{ readerTitle(itemData) }}</div>
    <div class="question-list ml-[38px]">
      <div v-for="(q, i) in itemData.questions" :key="i" class="q-item">
        <div class="content-txt q-title mb-[12px] flex text-[14px] leading-[22px]">
          <span>{{ i + 1 }}、</span>
          <div v-html="q?.stem"></div>
        </div>
        <div v-if="q?.steImg" class="image-war">
          <div v-for="img in q?.steImg.split(',')" class="mb-[5px]">
            <AsyncImage :src="img" />
          </div>
        </div>
        <div v-if="q.options?.length > 0" class="q-options">
          <div
            v-for="(option, j) in getOption(q.options)"
            :key="j"
            class="q-options-item flex-auto mb-[10px] mr-[20px]"
            :style="{...trueFalseStyle(q?.type)}"
          >
            <div class="content-txt q-option-content pb-[8px] text-[14px] leading-[22px]">
              <span>{{ option.name }}{{ option.content ? `、${option.content}` : '' }}</span>
            </div>
            <div v-if="option?.path" class="content-txt image-war mb-[5px]">
              <AsyncImage :src="option?.path" />
            </div>
          </div>
        </div>
        <div v-if="q?.type === 'essay'" class="mb-[80px]"></div>
      </div>
    </div>
  </div>
</template>
<style lang="css" scoped>
.image-war {
  width: 200px;
  height: auto;
  page-break-inside: avoid;
  break-inside: avoid;
  display: block;
  overflow: hidden;
}

/* PDF导出优化 */
.exam-type-title,
.q-title,
.q-option-content {
  word-spacing: normal;
  letter-spacing: normal;
  line-height: 1.6;
  page-break-inside: avoid;
  break-inside: avoid;
}

/* 确保文字不被分割 */
span, div {
  orphans: 3;
  widows: 3;
}

.content-txt {
  word-spacing: normal;
  letter-spacing: normal;
  line-height: 1.6;
  page-break-inside: avoid;
  break-inside: avoid;
}
</style>
